<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Health-AI 医护后台系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@4.24.15/dist/antd.min.css">
    <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/antd@4.24.15/dist/antd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
            background-color: #f0f2f5;
        }
        
        #root {
            height: 100vh;
        }
        
        .logo {
            height: 32px;
            margin: 16px;
            background: rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            font-weight: bold;
        }
        
        .site-header {
            background: #fff;
            padding: 0 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        }
        
        .header-search {
            flex: 1;
            margin-right: 20px;
        }
        
        .header-user {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .tag {
            background: #f0f2f5;
            border-radius: 4px;
            padding: 2px 8px;
            margin-right: 4px;
            font-size: 12px;
        }
        
        .success-tag {
            background: #52c41a;
            color: white;
        }
        
        .warning-tag {
            background: #faad14;
            color: white;
        }
        
        .danger-tag {
            background: #f5222d;
            color: white;
        }
        
        .chart-container {
            height: 300px;
            width: 100%;
        }
        
        .kpi-card {
            text-align: center;
            padding: 20px;
        }
        
        .kpi-value {
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0;
        }
        
        .kpi-label {
            font-size: 14px;
            color: #666;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .site-header {
                padding: 0 12px;
            }
            
            .header-search {
                margin-right: 10px;
            }
            
            .header-search input {
                width: 150px !important;
            }
            
            .logo {
                font-size: 16px;
            }
            
            .ant-layout-sider {
                position: fixed;
                height: 100vh;
                left: 0;
                z-index: 100;
            }
            
            .ant-layout {
                margin-left: 0;
            }
            
            .ant-card {
                margin-bottom: 12px;
            }
            
            .chart-container {
                height: 250px;
            }
        }
        
        @media (max-width: 576px) {
            .header-search {
                display: none;
            }
            
            .ant-layout-content {
                margin: 12px !important;
            }
            
            .ant-breadcrumb {
                margin: 12px 0 !important;
            }
            
            .ant-card {
                padding: 12px !important;
            }
            
            .chart-container {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script>
        // 模拟数据
        const mockData = {
            // KPI数据
            kpiData: [
                { title: '总患者数', value: 128, color: '#1890ff' },
                { title: '今日血糖异常', value: 8, color: '#f5222d' },
                { title: '在线设备', value: 42, color: '#52c41a' },
                { title: '待处理告警', value: 3, color: '#faad14' },
            ],
            
            // 设备状态数据
            deviceStatusData: [
                { name: '血糖仪-001', status: '在线', ip: '192.168.1.101' },
                { name: '血压计-002', status: '在线', ip: '192.168.1.102' },
                { name: '体重秤-003', status: '离线', ip: '192.168.1.103' },
                { name: '心电图-004', status: '在线', ip: '192.168.1.104' },
            ],
            
            // 最近告警数据
            alertData: [
                { patient: '张三', time: '2025-10-31 08:30', value: '8.5 mmol/L', type: '高血糖' },
                { patient: '李四', time: '2025-10-31 07:45', value: '3.2 mmol/L', type: '低血糖' },
                { patient: '王五', time: '2025-10-31 06:20', value: '设备离线', type: '设备告警' },
            ],
            
            // 患者数据
            patientData: [
                { id: 1, name: '张三', age: 65, gender: '男', tags: ['糖尿病', '高危'] },
                { id: 2, name: '李四', age: 58, gender: '女', tags: ['高血压'] },
                { id: 3, name: '王五', age: 72, gender: '男', tags: ['糖尿病', '心脏病'] },
                { id: 4, name: '赵六', age: 61, gender: '女', tags: ['高血脂'] },
                { id: 5, name: '钱七', age: 69, gender: '男', tags: ['糖尿病', '肾病'] },
            ],
            
            // 血糖数据
            glucoseData: [
                { id: 1, patient: '张三', time: '2025-10-31 08:30', value: 8.5, status: 'high' },
                { id: 2, patient: '张三', time: '2025-10-31 12:15', value: 9.2, status: 'high' },
                { id: 3, patient: '张三', time: '2025-10-31 18:45', value: 7.8, status: 'normal' },
                { id: 4, patient: '李四', time: '2025-10-31 07:20', value: 6.5, status: 'normal' },
                { id: 5, patient: '李四', time: '2025-10-31 19:30', value: 12.1, status: 'high' },
                { id: 6, patient: '王五', time: '2025-10-31 08:00', value: 3.2, status: 'low' },
            ],
            
            // 饮食记录数据
            dietData: [
                { 
                    id: 1, 
                    patient: '张三', 
                    time: '2025-10-31 12:30', 
                    foods: ['米饭', '红烧肉', '青菜'], 
                    calories: 650,
                    nutrients: { protein: 25, fat: 30, carbs: 70 }
                },
                { 
                    id: 2, 
                    patient: '李四', 
                    time: '2025-10-31 18:45', 
                    foods: ['面条', '鸡蛋', '西红柿'], 
                    calories: 420,
                    nutrients: { protein: 18, fat: 12, carbs: 60 }
                },
            ],
            
            // 设备数据
            deviceData: [
                { 
                    id: 1, 
                    name: '血糖仪-001', 
                    type: '血糖仪', 
                    status: 'online', 
                    ip: '192.168.1.101', 
                    firmware: 'v2.1.5',
                    battery: 85,
                    lastSeen: '2025-10-31 09:30'
                },
                { 
                    id: 2, 
                    name: '血压计-002', 
                    type: '血压计', 
                    status: 'online', 
                    ip: '192.168.1.102', 
                    firmware: 'v1.8.3',
                    battery: 60,
                    lastSeen: '2025-10-31 09:25'
                },
                { 
                    id: 3, 
                    name: '体重秤-003', 
                    type: '体重秤', 
                    status: 'offline', 
                    ip: '192.168.1.103', 
                    firmware: 'v1.2.7',
                    battery: 0,
                    lastSeen: '2025-10-30 16:45'
                },
                { 
                    id: 4, 
                    name: '心电图-004', 
                    type: '心电图仪', 
                    status: 'online', 
                    ip: '192.168.1.104', 
                    firmware: 'v3.0.1',
                    battery: 95,
                    lastSeen: '2025-10-31 09:40'
                },
            ],
            
            // 报告数据
            reportData: [
                { id: 1, patient: '张三', type: '月度报告', period: '2025-10', status: '已生成', generatedAt: '2025-10-31 10:30' },
                { id: 2, patient: '李四', type: '周报告', period: '2025-10-4周', status: '已生成', generatedAt: '2025-10-31 09:15' },
                { id: 3, patient: '王五', type: '月度报告', period: '2025-10', status: '生成中', generatedAt: '2025-10-31 11:00' },
            ]
        };

        // 初始化Ant Design组件
        const { Layout, Menu, Breadcrumb, Input, Avatar, Dropdown, Space, Card, Row, Col, Statistic, Table, List, Button, Tag, Progress, Form, Select, DatePicker, Tabs, Tree, InputNumber, Switch, message } = antd;
        const { UserOutlined, DashboardOutlined, TeamOutlined, MedicineBoxOutlined, CoffeeOutlined, DesktopOutlined, FileOutlined, SettingOutlined, SearchOutlined, ArrowUpOutlined, ArrowDownOutlined, PlusOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, AlertOutlined, LineChartOutlined, SyncOutlined, CloudDownloadOutlined, PoweroffOutlined, CheckCircleOutlined, FilePdfOutlined, EyeOutlined, SendOutlined, SaveOutlined, UsergroupAddOutlined, FileSearchOutlined, CameraOutlined } = antd;
        const { RangePicker } = DatePicker;
        const { Option } = Select;
        const { TabPane } = Tabs;

        // 主应用组件
        class App extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    collapsed: false,
                    currentView: 'dashboard',
                    user: { username: '管理员' }
                };
            }

            renderCurrentView = () => {
                switch (this.state.currentView) {
                    case 'dashboard':
                        return this.renderDashboard();
                    case 'patients':
                        return this.renderPatients();
                    case 'glucose':
                        return this.renderGlucoseMonitoring();
                    case 'diet':
                        return this.renderDietRecords();
                    case 'devices':
                        return this.renderDeviceManagement();
                    case 'reports':
                        return this.renderReportCenter();
                    case 'settings':
                        return this.renderSystemSettings();
                    default:
                        return this.renderDashboard();
                }
            };

            // 仪表盘页面
            renderDashboard = () => {
                // 血糖趋势数据
                const glucoseTrendOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value',
                        name: '血糖 (mmol/L)'
                    },
                    series: [{
                        data: [6.2, 5.8, 7.1, 6.5, 8.2, 7.8, 6.9],
                        type: 'line',
                        smooth: true,
                        markLine: {
                            data: [
                                { yAxis: 7.0, name: '高血糖阈值' },
                                { yAxis: 3.9, name: '低血糖阈值' }
                            ]
                        }
                    }]
                };

                const deviceColumns = [
                    { title: '设备名称', dataIndex: 'name' },
                    { title: '状态', dataIndex: 'status', render: (status) => (
                        React.createElement('span', { className: status === '在线' ? 'success-tag' : 'danger-tag' },
                            status
                        )
                    )},
                    { title: 'IP地址', dataIndex: 'ip' },
                ];

                return React.createElement('div', null,
                    React.createElement('h2', null, '仪表盘'),
                    
                    // KPI卡片
                    React.createElement(Row, { gutter: 16, style: { marginBottom: 24 } },
                        mockData.kpiData.map((item, index) => 
                            React.createElement(Col, { span: 6, key: index },
                                React.createElement(Card, { className: "kpi-card" },
                                    React.createElement(Statistic, {
                                        title: item.title,
                                        value: item.value,
                                        valueStyle: { color: item.color }
                                    })
                                )
                            )
                        )
                    ),

                    // 图表和列表
                    React.createElement(Row, { gutter: 16 },
                        React.createElement(Col, { span: 16 },
                            React.createElement(Card, { title: "血糖趋势" },
                                React.createElement('div', { 
                                    id: "glucoseChart", 
                                    className: "chart-container",
                                    ref: (el) => {
                                        if (el) {
                                            const chart = echarts.init(el);
                                            chart.setOption(glucoseTrendOption);
                                        }
                                    }
                                })
                            )
                        ),
                        React.createElement(Col, { span: 8 },
                            React.createElement(Card, { title: "设备在线状态" },
                                React.createElement(Table, {
                                    dataSource: mockData.deviceStatusData,
                                    columns: deviceColumns,
                                    pagination: false,
                                    size: "small",
                                    rowKey: "name"
                                })
                            )
                        )
                    ),

                    // 最近告警
                    React.createElement(Row, { gutter: 16, style: { marginTop: 24 } },
                        React.createElement(Col, { span: 24 },
                            React.createElement(Card, { title: "最近告警" },
                                React.createElement(List, {
                                    dataSource: mockData.alertData,
                                    renderItem: (item) => React.createElement(List.Item, null,
                                        React.createElement(List.Item.Meta, {
                                            title: item.patient,
                                            description: `${item.time} - ${item.value} (${item.type})`
                                        })
                                    )
                                })
                            )
                        )
                    )
                );
            };

            // 患者管理页面
            renderPatients = () => {
                const columns = [
                    { title: '姓名', dataIndex: 'name' },
                    { title: '年龄', dataIndex: 'age' },
                    { title: '性别', dataIndex: 'gender' },
                    { 
                        title: '标签', 
                        dataIndex: 'tags', 
                        render: tags => tags.map((t, index) => 
                            React.createElement('span', { 
                                key: index, 
                                className: `tag ${t === '糖尿病' ? 'danger-tag' : t === '高血压' ? 'warning-tag' : 'success-tag'}` 
                            }, t)
                        )
                    },
                    {
                        title: '操作',
                        render: (_, record) => React.createElement(Space, null,
                            React.createElement(Button, { type: "link" }, "编辑"),
                            React.createElement(Button, { type: "link", danger: true }, "删除")
                        )
                    }
                ];

                return React.createElement('div', null,
                    React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', marginBottom: 16 } },
                        React.createElement(Space, null,
                            React.createElement(Input, {
                                placeholder: "搜索患者",
                                prefix: React.createElement(SearchOutlined, null),
                                style: { width: 200 }
                            })
                        ),
                        React.createElement(Button, { type: "primary", icon: React.createElement(PlusOutlined, null) }, "新增患者")
                    ),
                    React.createElement(Table, {
                        columns: columns,
                        dataSource: mockData.patientData,
                        rowKey: "id",
                        pagination: { pageSize: 10 }
                    })
                );
            };

            // 血糖监测页面
            renderGlucoseMonitoring = () => {
                const glucoseTrendOption = {
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['张三', '李四', '王五'] },
                    xAxis: {
                        type: 'category',
                        data: ['08:00', '12:00', '16:00', '20:00']
                    },
                    yAxis: {
                        type: 'value',
                        name: '血糖 (mmol/L)'
                    },
                    series: [
                        {
                            name: '张三',
                            data: [8.5, 9.2, 7.8, 6.5],
                            type: 'line',
                            smooth: true
                        },
                        {
                            name: '李四',
                            data: [6.5, 7.2, 8.1, 12.1],
                            type: 'line',
                            smooth: true
                        },
                        {
                            name: '王五',
                            data: [5.2, 4.8, 3.9, 3.2],
                            type: 'line',
                            smooth: true
                        }
                    ],
                    markLine: {
                        data: [
                            { yAxis: 7.0, name: '高血糖阈值' },
                            { yAxis: 3.9, name: '低血糖阈值' }
                        ]
                    }
                };

                const columns = [
                    { title: '患者', dataIndex: 'patient' },
                    { title: '测量时间', dataIndex: 'time' },
                    { 
                        title: '血糖值', 
                        dataIndex: 'value',
                        render: (value, record) => (
                            React.createElement('span', { className: record.status === 'high' ? 'danger-tag' : record.status === 'low' ? 'warning-tag' : 'success-tag' },
                                `${value} mmol/L`
                            )
                        )
                    },
                    {
                        title: '状态',
                        dataIndex: 'status',
                        render: (status) => {
                            if (status === 'high') return React.createElement(Tag, { color: "error" }, "高血糖");
                            if (status === 'low') return React.createElement(Tag, { color: "warning" }, "低血糖");
                            return React.createElement(Tag, { color: "success" }, "正常");
                        }
                    },
                    {
                        title: '操作',
                        render: (_, record) => React.createElement(Space, null,
                            React.createElement(Button, { type: "link", size: "small" }, "详情"),
                            React.createElement(Button, { type: "link", size: "small" }, "导出")
                        )
                    }
                ];

                return React.createElement('div', null,
                    React.createElement('h2', null, '血糖监测'),
                    
                    // 筛选条件
                    React.createElement(Card, { style: { marginBottom: 24 } },
                        React.createElement(Row, { gutter: 16 },
                            React.createElement(Col, { span: 6 },
                                React.createElement('div', null, "患者筛选"),
                                React.createElement(Select, { 
                                    defaultValue: "all", 
                                    style: { width: '100%' }
                                },
                                    React.createElement(Option, { value: "all" }, "全部患者"),
                                    React.createElement(Option, { value: "1" }, "张三"),
                                    React.createElement(Option, { value: "2" }, "李四"),
                                    React.createElement(Option, { value: "3" }, "王五")
                                )
                            ),
                            React.createElement(Col, { span: 10 },
                                React.createElement('div', null, "时间范围"),
                                React.createElement(RangePicker, { style: { width: '100%' } })
                            ),
                            React.createElement(Col, { span: 8 },
                                React.createElement('div', { style: { height: 24 } }),
                                React.createElement(Space, null,
                                    React.createElement(Button, { type: "primary", icon: React.createElement(LineChartOutlined, null) }, "生成图表"),
                                    React.createElement(Button, { icon: React.createElement(AlertOutlined, null) }, "告警设置"),
                                    React.createElement(Button, { icon: React.createElement(DownloadOutlined, null) }, "导出PDF")
                                )
                            )
                        )
                    ),

                    // 图表展示
                    React.createElement(Card, { title: "血糖趋势图", style: { marginBottom: 24 } },
                        React.createElement('div', { 
                            id: "glucoseTrendChart", 
                            className: "chart-container",
                            ref: (el) => {
                                if (el) {
                                    const chart = echarts.init(el);
                                    chart.setOption(glucoseTrendOption);
                                }
                            }
                        })
                    ),

                    // 数据表格
                    React.createElement(Card, { title: "血糖记录" },
                        React.createElement(Table, {
                            dataSource: mockData.glucoseData,
                            columns: columns,
                            rowKey: "id",
                            pagination: { pageSize: 10 }
                        })
                    )
                );
            };

            // 饮食记录页面
            renderDietRecords = () => {
                const columns = [
                    { title: '患者', dataIndex: 'patient' },
                    { title: '记录时间', dataIndex: 'time' },
                    { 
                        title: '食物', 
                        dataIndex: 'foods',
                        render: foods => foods.join(', ')
                    },
                    { title: '热量(kcal)', dataIndex: 'calories' },
                    {
                        title: '营养成分',
                        render: (_, record) => (
                            React.createElement('span', null,
                                `蛋白质:${record.nutrients.protein}g 脂肪:${record.nutrients.fat}g 碳水:${record.nutrients.carbs}g`
                            )
                        )
                    },
                    {
                        title: '操作',
                        render: (_, record) => React.createElement(Space, null,
                            React.createElement(Button, { type: "link", size: "small" }, "详情"),
                            React.createElement(Button, { type: "link", size: "small" }, "编辑")
                        )
                    }
                ];

                return React.createElement('div', null,
                    React.createElement('h2', null, '饮食记录'),
                    
                    // 功能按钮
                    React.createElement(Card, { style: { marginBottom: 24 } },
                        React.createElement(Space, null,
                            React.createElement(Button, { type: "primary", icon: React.createElement(CameraOutlined, null) }, "AI食物识别"),
                            React.createElement(Button, { icon: React.createElement(PlusOutlined, null) }, "手动录入"),
                            React.createElement(Button, { icon: React.createElement(DownloadOutlined, null) }, "导出记录")
                        )
                    ),

                    // 饮食记录表格
                    React.createElement(Card, { title: "饮食记录" },
                        React.createElement(Table, {
                            dataSource: mockData.dietData,
                            columns: columns,
                            rowKey: "id",
                            pagination: { pageSize: 10 }
                        })
                    )
                );
            };

            // 设备管理页面
            renderDeviceManagement = () => {
                const columns = [
                    { title: '设备名称', dataIndex: 'name' },
                    { title: '类型', dataIndex: 'type' },
                    { 
                        title: '状态', 
                        dataIndex: 'status',
                        render: (status) => (
                            React.createElement(Tag, { 
                                icon: status === 'online' ? React.createElement(CheckCircleOutlined, null) : React.createElement(PoweroffOutlined, null),
                                color: status === 'online' ? 'success' : 'error'
                            }, status === 'online' ? '在线' : '离线')
                        )
                    },
                    { title: 'IP地址', dataIndex: 'ip' },
                    { title: '固件版本', dataIndex: 'firmware' },
                    { 
                        title: '电量', 
                        dataIndex: 'battery',
                        render: (battery, record) => (
                            record.status === 'online' ? 
                            React.createElement(Progress, { percent: battery, size: "small", status: battery > 20 ? 'normal' : 'exception' }) :
                            'N/A'
                        )
                    },
                    { title: '最后在线', dataIndex: 'lastSeen' },
                    {
                        title: '操作',
                        render: (_, record) => (
                            React.createElement(Space, null,
                                React.createElement(Button, { 
                                    type: "link", 
                                    size: "small", 
                                    icon: React.createElement(SyncOutlined, null),
                                    disabled: record.status === 'online'
                                }, "连接"),
                                React.createElement(Button, { 
                                    type: "link", 
                                    size: "small", 
                                    icon: React.createElement(CloudDownloadOutlined, null),
                                    disabled: record.status !== 'online'
                                }, "升级")
                            )
                        )
                    }
                ];

                return React.createElement('div', null,
                    React.createElement('h2', null, '设备管理'),
                    
                    // 操作栏
                    React.createElement(Card, { style: { marginBottom: 24 } },
                        React.createElement(Space, null,
                            React.createElement(Button, { type: "primary", icon: React.createElement(SyncOutlined, null) }, "刷新设备列表"),
                            React.createElement(Button, { icon: React.createElement(CloudDownloadOutlined, null) }, "批量升级")
                        )
                    ),

                    // 设备统计
                    React.createElement(Card, { style: { marginBottom: 24 } },
                        React.createElement(Space, { size: "large" },
                            React.createElement('div', null,
                                React.createElement('div', { className: "kpi-label" }, "总设备数"),
                                React.createElement('div', { className: "kpi-value" }, "12")
                            ),
                            React.createElement('div', null,
                                React.createElement('div', { className: "kpi-label" }, "在线设备"),
                                React.createElement('div', { className: "kpi-value", style: { color: '#52c41a' } }, "9")
                            ),
                            React.createElement('div', null,
                                React.createElement('div', { className: "kpi-label" }, "离线设备"),
                                React.createElement('div', { className: "kpi-value", style: { color: '#f5222d' } }, "3")
                            ),
                            React.createElement('div', null,
                                React.createElement('div', { className: "kpi-label" }, "待升级"),
                                React.createElement('div', { className: "kpi-value", style: { color: '#faad14' } }, "2")
                            )
                        )
                    ),

                    // 设备列表
                    React.createElement(Card, { title: "设备列表" },
                        React.createElement(Table, {
                            dataSource: mockData.deviceData,
                            columns: columns,
                            rowKey: "id",
                            pagination: { pageSize: 10 }
                        })
                    )
                );
            };

            // 报告中心页面
            renderReportCenter = () => {
                const columns = [
                    { title: '患者', dataIndex: 'patient' },
                    { title: '报告类型', dataIndex: 'type' },
                    { title: '统计周期', dataIndex: 'period' },
                    { 
                        title: '状态', 
                        dataIndex: 'status',
                        render: (status) => (
                            React.createElement('span', { className: status === '已生成' ? 'success-tag' : 'warning-tag' },
                                status
                            )
                        )
                    },
                    { title: '生成时间', dataIndex: 'generatedAt' },
                    {
                        title: '操作',
                        render: (_, record) => (
                            React.createElement(Space, null,
                                React.createElement(Button, { 
                                    type: "link", 
                                    size: "small", 
                                    icon: React.createElement(EyeOutlined, null),
                                    disabled: record.status !== '已生成'
                                }, "预览"),
                                React.createElement(Button, { 
                                    type: "link", 
                                    size: "small", 
                                    icon: React.createElement(DownloadOutlined, null),
                                    disabled: record.status !== '已生成'
                                }, "下载"),
                                React.createElement(Button, { 
                                    type: "link", 
                                    size: "small", 
                                    icon: React.createElement(SendOutlined, null),
                                    disabled: record.status !== '已生成'
                                }, "发送")
                            )
                        )
                    }
                ];

                return React.createElement('div', null,
                    React.createElement('h2', null, '报告中心'),
                    
                    // 报告生成选项
                    React.createElement(Card, { style: { marginBottom: 24 } },
                        React.createElement(Row, { gutter: 16 },
                            React.createElement(Col, { span: 6 },
                                React.createElement('div', null, "患者筛选"),
                                React.createElement(Select, { 
                                    defaultValue: "all", 
                                    style: { width: '100%' }
                                },
                                    React.createElement(Option, { value: "all" }, "全部患者"),
                                    React.createElement(Option, { value: "1" }, "张三"),
                                    React.createElement(Option, { value: "2" }, "李四"),
                                    React.createElement(Option, { value: "3" }, "王五")
                                )
                            ),
                            React.createElement(Col, { span: 6 },
                                React.createElement('div', null, "报告类型"),
                                React.createElement(Select, { 
                                    defaultValue: "monthly", 
                                    style: { width: '100%' }
                                },
                                    React.createElement(Option, { value: "daily" }, "日报"),
                                    React.createElement(Option, { value: "weekly" }, "周报"),
                                    React.createElement(Option, { value: "monthly" }, "月报"),
                                    React.createElement(Option, { value: "quarterly" }, "季报")
                                )
                            ),
                            React.createElement(Col, { span: 8 },
                                React.createElement('div', null, "时间范围"),
                                React.createElement(RangePicker, { style: { width: '100%' } })
                            ),
                            React.createElement(Col, { span: 4 },
                                React.createElement('div', { style: { height: 24 } }),
                                React.createElement(Button, { type: "primary", icon: React.createElement(FilePdfOutlined, null) }, "生成报告")
                            )
                        )
                    ),

                    // 报告统计
                    React.createElement(Row, { gutter: 16, style: { marginBottom: 24 } },
                        React.createElement(Col, { span: 6 },
                            React.createElement(Card, { className: "kpi-card" },
                                React.createElement('div', { className: "kpi-label" }, "本月生成报告"),
                                React.createElement('div', { className: "kpi-value" }, "24")
                            )
                        ),
                        React.createElement(Col, { span: 6 },
                            React.createElement(Card, { className: "kpi-card" },
                                React.createElement('div', { className: "kpi-label" }, "待生成报告"),
                                React.createElement('div', { className: "kpi-value" }, "8")
                            )
                        ),
                        React.createElement(Col, { span: 6 },
                            React.createElement(Card, { className: "kpi-card" },
                                React.createElement('div', { className: "kpi-label" }, "已发送报告"),
                                React.createElement('div', { className: "kpi-value" }, "19")
                            )
                        ),
                        React.createElement(Col, { span: 6 },
                            React.createElement(Card, { className: "kpi-card" },
                                React.createElement('div', { className: "kpi-label" }, "下载次数"),
                                React.createElement('div', { className: "kpi-value" }, "42")
                            )
                        )
                    ),

                    // 报告列表
                    React.createElement(Card, { title: "报告列表" },
                        React.createElement(Table, {
                            dataSource: mockData.reportData,
                            columns: columns,
                            rowKey: "id",
                            pagination: { pageSize: 10 }
                        })
                    )
                );
            };

            // 系统设置页面
            renderSystemSettings = () => {
                // 角色权限树数据
                const roleTreeData = [
                    {
                        title: '系统管理',
                        key: 'system',
                        children: [
                            { title: '用户管理', key: 'user-management' },
                            { title: '角色权限', key: 'role-permission' },
                            { title: '系统日志', key: 'system-log' },
                        ],
                    },
                    {
                        title: '业务功能',
                        key: 'business',
                        children: [
                            { title: '患者管理', key: 'patient-management' },
                            { title: '血糖监测', key: 'glucose-monitoring' },
                            { title: '饮食记录', key: 'diet-records' },
                            { title: '设备管理', key: 'device-management' },
                            { title: '报告中心', key: 'report-center' },
                        ],
                    },
                ];

                // 阈值设置默认值
                const thresholdDefaults = {
                    glucoseHigh: 7.0,
                    glucoseLow: 3.9,
                    bloodPressureHigh: 140,
                    bloodPressureLow: 90,
                };

                return React.createElement('div', null,
                    React.createElement('h2', null, '系统设置'),
                    
                    React.createElement(Tabs, { defaultActiveKey: "1" },
                        React.createElement(TabPane, { 
                            tab: React.createElement('span', null, React.createElement(AlertOutlined, null), " 阈值配置"), 
                            key: "1" 
                        },
                            React.createElement(Card, null,
                                React.createElement(Row, { gutter: 16 },
                                    React.createElement(Col, { span: 12 },
                                        React.createElement(Card, { title: "血糖阈值" },
                                            React.createElement('div', null, "高血糖阈值 (mmol/L): ", thresholdDefaults.glucoseHigh),
                                            React.createElement('div', null, "低血糖阈值 (mmol/L): ", thresholdDefaults.glucoseLow)
                                        )
                                    ),
                                    React.createElement(Col, { span: 12 },
                                        React.createElement(Card, { title: "血压阈值" },
                                            React.createElement('div', null, "高血压阈值 (mmHg): ", thresholdDefaults.bloodPressureHigh),
                                            React.createElement('div', null, "低血压阈值 (mmHg): ", thresholdDefaults.bloodPressureLow)
                                        )
                                    )
                                ),
                                React.createElement(Button, { type: "primary", icon: React.createElement(SaveOutlined, null), style: { marginTop: 16 } }, "保存阈值设置")
                            )
                        ),

                        React.createElement(TabPane, { 
                            tab: React.createElement('span', null, React.createElement(UsergroupAddOutlined, null), " 角色权限"), 
                            key: "2" 
                        },
                            React.createElement(Card, null,
                                React.createElement(Row, { gutter: 16 },
                                    React.createElement(Col, { span: 8 },
                                        React.createElement(Card, { title: "角色列表", size: "small" },
                                            React.createElement('div', { style: { marginBottom: 16 } },
                                                React.createElement(Button, { type: "primary", block: true }, "新增角色")
                                            ),
                                            React.createElement('div', { style: { padding: '8px 0', borderBottom: '1px solid #f0f0f0' } }, "系统管理员"),
                                            React.createElement('div', { style: { padding: '8px 0', borderBottom: '1px solid #f0f0f0' } }, "医护人员"),
                                            React.createElement('div', { style: { padding: '8px 0', borderBottom: '1px solid #f0f0f0' } }, "营养师"),
                                            React.createElement('div', { style: { padding: '8px 0' } }, "技术支持")
                                        )
                                    ),
                                    React.createElement(Col, { span: 16 },
                                        React.createElement(Card, { title: "权限配置", size: "small" },
                                            React.createElement('div', null, "权限树结构 (模拟显示)"),
                                            React.createElement('div', { style: { marginTop: 16 } },
                                                React.createElement(Button, { type: "primary", icon: React.createElement(SaveOutlined, null) }, "保存权限设置")
                                            )
                                        )
                                    )
                                )
                            )
                        ),

                        React.createElement(TabPane, { 
                            tab: React.createElement('span', null, React.createElement(FileSearchOutlined, null), " 日志审计"), 
                            key: "3" 
                        },
                            React.createElement(Card, null,
                                React.createElement(Row, { gutter: 16 },
                                    React.createElement(Col, { span: 12 },
                                        React.createElement(Card, { title: "审计设置" },
                                            React.createElement('div', null, "日志保留天数: 30天"),
                                            React.createElement('div', null, "操作日志记录: 已启用"),
                                            React.createElement('div', null, "登录日志记录: 已启用"),
                                            React.createElement(Button, { type: "primary", icon: React.createElement(SaveOutlined, null), style: { marginTop: 16 } }, "保存审计设置")
                                        )
                                    ),
                                    React.createElement(Col, { span: 12 },
                                        React.createElement(Card, { title: "日志统计" },
                                            React.createElement('div', { style: { marginBottom: 16 } },
                                                React.createElement('div', { className: "kpi-label" }, "今日操作日志"),
                                                React.createElement('div', { className: "kpi-value" }, "128")
                                            ),
                                            React.createElement('div', { style: { marginBottom: 16 } },
                                                React.createElement('div', { className: "kpi-label" }, "本周登录次数"),
                                                React.createElement('div', { className: "kpi-value" }, "42")
                                            ),
                                            React.createElement('div', null,
                                                React.createElement('div', { className: "kpi-label" }, "本月系统错误"),
                                                React.createElement('div', { className: "kpi-value", style: { color: '#f5222d' } }, "3")
                                            )
                                        )
                                    )
                                )
                            )
                        )
                    )
                );
            };

            render() {
                const menuItems = [
                    {
                        key: 'dashboard',
                        icon: React.createElement(DashboardOutlined, null),
                        label: '仪表盘',
                    },
                    {
                        key: 'patients',
                        icon: React.createElement(TeamOutlined, null),
                        label: '患者管理',
                    },
                    {
                        key: 'glucose',
                        icon: React.createElement(MedicineBoxOutlined, null),
                        label: '血糖监测',
                    },
                    {
                        key: 'diet',
                        icon: React.createElement(CoffeeOutlined, null),
                        label: '饮食记录',
                    },
                    {
                        key: 'devices',
                        icon: React.createElement(DesktopOutlined, null),
                        label: '设备管理',
                    },
                    {
                        key: 'reports',
                        icon: React.createElement(FileOutlined, null),
                        label: '报告中心',
                    },
                    {
                        key: 'settings',
                        icon: React.createElement(SettingOutlined, null),
                        label: '系统设置',
                    },
                ];

                const userMenuItems = [
                    {
                        key: 'profile',
                        label: '个人资料',
                    },
                    {
                        key: 'settings',
                        label: '设置',
                    },
                    {
                        key: 'logout',
                        label: '退出登录',
                    },
                ];

                const { Header, Sider, Content, Footer } = Layout;

                return React.createElement(Layout, { style: { minHeight: '100vh' } },
                    // 侧边导航
                    React.createElement(Sider, { 
                        collapsible: true, 
                        collapsed: this.state.collapsed, 
                        onCollapse: (value) => this.setState({ collapsed: value })
                    },
                        React.createElement('div', { className: "logo" },
                            this.state.collapsed ? 'HAI' : 'Health-AI'
                        ),
                        React.createElement(Menu, {
                            theme: "dark",
                            mode: "inline",
                            defaultSelectedKeys: ['dashboard'],
                            items: menuItems,
                            onClick: ({ key }) => this.setState({ currentView: key })
                        })
                    ),

                    // 主体区域
                    React.createElement(Layout, null,
                        React.createElement(Header, { className: "site-header" },
                            React.createElement('div', { className: "header-search" },
                                React.createElement(Input, {
                                    placeholder: "全局搜索（患者/报告/设备）",
                                    prefix: React.createElement(SearchOutlined, null),
                                    style: { width: 300 }
                                })
                            ),
                            React.createElement('div', { className: "header-user" },
                                React.createElement(Dropdown, { menu: { items: userMenuItems }, placement: "bottomRight" },
                                    React.createElement(Space, null,
                                        React.createElement('span', null, this.state.user.username),
                                        React.createElement(Avatar, { icon: React.createElement(UserOutlined, null) })
                                    )
                                )
                            )
                        ),

                        React.createElement(Content, { style: { margin: '16px' } },
                            React.createElement(Breadcrumb, { style: { margin: '16px 0' } },
                                React.createElement(Breadcrumb.Item, null, "首页"),
                                React.createElement(Breadcrumb.Item, null,
                                    menuItems.find(item => item.key === this.state.currentView)?.label
                                )
                            ),
                            // 子路由渲染区
                            React.createElement('div', { style: { padding: 24, minHeight: 360, background: '#fff' } },
                                this.renderCurrentView()
                            )
                        ),

                        React.createElement(Footer, { style: { textAlign: 'center' } },
                            '©2025 Health-AI 医护后台系统 | 版本 1.0.0'
                        )
                    )
                );
            }
        }

        // 渲染应用
        window.addEventListener('DOMContentLoaded', () => {
            const root = ReactDOM.createRoot(document.getElementById('root'));
            root.render(React.createElement(App, null));
        });
    </script>
</body>
</html>
